<!-- <template>
  <el-dropdown :v-bind="$attrs" @command="handleCommand">
    <slot>
      <el-button :type="buttonType" :class="buttonClass" :size="size">
        {{ $tt(label) }}<i class="el-icon-arrow-down el-icon--right"></i>
      </el-button>
    </slot>
    <el-dropdown-menu slot="dropdown">
      <el-dropdown-item :key="index" v-for="(item, index) in _actualList" :command="item">{{ item._label
      }}</el-dropdown-item>
    </el-dropdown-menu>
  </el-dropdown>
</template> -->
<script>
import list_remote from './mixin/list_remote'
export default {
  mixins: [list_remote],
  props: {
    label: String,
    size: String,
    buttonType: {
      type: String,
      default: 'primary'
    },
    buttonClass: {
      type: String,
      default: ''
    },
  },
  render: function (h) {

    const clickArea = (<el-button type={this.buttonType} class={this.buttonClass}
      size={this.size}>
      {this.$tt(this.label)}<i class="el-icon-arrow-down el-icon--right"></i>
    </el-button>)
    const _refreshButton = (<el-button disabled={this.dataLoading} class="pd_1 mg_t1 mg_h1" style="align-self: end;"
      type="" icon="el-icon-refresh" onClick={this.clickRefresh}>
      {this.$tt("label_refresh")}
    </el-button>)
    const _isEmpty = _.isEmpty(this._actualList)
    const _emptyShow = (<div class="el-select-dropdown__empty mg_h1">{this.dataLoading ? (<span><i class="el-icon-loading el-icon--left"></i>{this.$tt('label_data_loading')}</span>) : (this.warnning || this.$tt('tip_no_data'))} </div>)
    const _lastChild = (<div style="display: flex;flex-direction: column;align-items: center;" >
      {_isEmpty ? _emptyShow : null}
      {this.url ? _refreshButton : null}
    </div>)
    const dropdownList = (
      <el-dropdown-menu slot="dropdown">
        {this._actualList.map((item, index) => (<el-dropdown-item key={index} command={item}>
          {item._label}</el-dropdown-item>))}
        {(_isEmpty || this.url) ? _lastChild : null}
      </el-dropdown-menu>
    )

    return h("el-dropdown", {
      props: this.$attrs,
      on: {
        command: this.handleCommand,
      },
    }, [
      clickArea, dropdownList
    ])
  },
  methods: {
    handleCommand(command) {
      this.$emit('command', command)
    },
    clickRefresh(event) {
      event.stopPropagation();
      this._getRemoteData()
    },
  }
}
</script>
<style ></style>
